<template>
    <div>
        <h2 class="has-text-weight-bold">
            {{productItem.title}}
            <span class="tag is-primary is-pulled-right has-text-white"
                @click="addCartItem(productItem)">
                Add to CartStore
            </span>
        </h2>
        <p>{{productItem.description}}</p>
        <span class="has-text-primary has-text-weight-bold">
            <i class="fa fa-usd"></i> {{productItem.price}}
        </span>
    </div>
</template>

<script lang="ts">
import {Component, Prop, Vue} from "vue-property-decorator"
import {Product} from "@/model/Product";
import {cartStore} from "@/store/cart/CartStore";

@Component({})
export default class ProductListItem extends Vue {
    name = "ProductListItem"
    @Prop()
    productItem!: Product;

    private addCartItem(productItem:Product){
        console.log(productItem);
        let cartItem = {
            id:productItem.id,
            title:productItem.title,
            price:productItem.price,
            description:productItem.description,
            quantity:1
        }
        cartStore.addCartItem(cartItem);
    }
}
</script>

<style scoped>
.tag{
    cursor:pointer;
}
</style>
